<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>商品</title>
    <link rel="stylesheet" type="text/css" href="../../js/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" /> 
    <link rel="stylesheet" type="text/css" href="../../css/goods/goods_details.css" /> 
</head>

<body>
    <div id="detail_id">
        <header class="header-main">
            <van-nav-bar title="商品详情" left-arrow @click-left="onClosePage"></van-nav-bar>
        </header>
        <template>
        <div class="detail-info main-body">
            <div class="goods-carousel">
                <img src="../../images/goodsDetail/goods_header.png" alt="">
            </div>
            <div class="price-area">
                <van-cell :title="'¥'+price" :value="'已售'+beSoldNumber+'份/剩余'+remainNumber+'份'"  title-class="price-title" value-class="goods-numbner" ></van-cell>
                <van-cell :title="'¥'+oldPrice" :value="'距离结束不到'+remainTime+'天'"  title-class="old-price-title" value-class="goods-numbner"></van-cell>
            </div>
            <div class="buy-progress">
                <span class="progress-title">已抢{{buyProgress}}%</span>
                <div class="progress-item"><div class="progress-active" :style="{width:buyProgress+'%'}"></div></div>
            </div>
            <div class="goods-title">1元抢原价24元的“滴水山泉”天然饮用山泉水一件12瓶（550ml），您还等什么！</div>
            <div class="goods-type">
                <span><van-icon name="passed" color="#ef484f" size="16"></van-icon>美食</span>
                <span><van-icon name="passed" color="#ef484f" size="16"></van-icon>秒杀</span>
            </div>
            <div class="tab-area">
                <!-- <van-tabs v-model="activeTab">
                    <van-tab title="详情" name="0"></van-tab>
                    <van-tab title="使用说明" name="1"></van-tab>
                  </van-tabs> -->
                  <div class="goods-tabs">
                        <span class="goods-tabs-item" :class="activeTab==0 ? 'active':''" @click="goodsTabClick(0)">详情</span>
                        <span class="goods-tabs-item" :class="activeTab==1 ? 'active':''" @click="goodsTabClick(1)">使用说明</span>
                  </div>
            </div>
            <div class="goods-detail">
                <img src="../../images/goodsDetail/bug_notice.png" alt=""> 
                <img src="../../images/goodsDetail/video_introduce_title.png" alt=""> 
                <video height="250" width="100%"  controls="controls" poster="../../images/goodsDetail/video_introduce.png">
                    <source src="../../images/goodsDetail/video.mp4" type="video/mp4" />
                    您的浏览器不支持 video 标签。
                </video>
                <img src="../../images/goodsDetail/goods_detail.png" alt=""> 
            </div>
        </div>
        </template>

        
    </div>
    <footer>
        <div class="place-order-imy" onclick="placeOrder()"><span>云闪付新用户购买</span></div>
        <!-- <div class="place-order-imy" onclick="placeOrder()"><span>立即秒杀</span></div> -->
    </footer>
</body>
<script type="text/javascript" src="../../js/jquery/jquery320min.js"></script> 
<script type="text/javascript" src="../../js/vant/vuemin.js"></script>
<script type="text/javascript" src="../../js/vant/vantmin.js"></script>
<script type="text/javascript" src="../../js/packajax.js"></script>
<script type="text/javascript" src="../../js/goods/goods_details.js"></script>
</html>